<template>
  <view class="home-container">
    <view class="header">
      <view class="location-section">
        <uni-icons type="location-filled" size="18" color="#2979FF"></uni-icons>
        <text class="location-text">杭州市</text>
      </view>
      <view class="title">家庭医生</view>
      <view class="placeholder"></view> </view>

    <view class="search-bar">
      <uni-icons type="search" size="20" color="#999"></uni-icons>
      <input class="search-input" placeholder="搜索机构 / 医生" v-model="searchText" confirm-type="search" @confirm="onSearch" />
    </view>

    <view class="promo-card">
      <view class="promo-content">
        <text class="promo-title">家庭医生线上签约已开通</text>
        <text class="promo-subtitle">提交签约申请，通过即可享受服务</text>
        <button class="promo-button" @click="navigateTo('/pages/index/signOnline')">立即体验</button>
      </view>
      <image class="promo-image" src="../../static/doctor.jpg" alt="医生插图"/>
    </view>

    <view class="main-features">
      <view class="feature-item" @click="navigateTo('/pages/index/signOnline')">
        <image class="feature-icon icon-standard" src="../../static/在线签约.jpeg" alt="在线签约图标"/>
        <text class="feature-text">在线签约</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/index/healthObserve')">
        <image class="feature-icon icon-standard" src="https://img.icons8.com/fluency/96/heart-with-pulse.png" alt="健康监测图标"/>
        <text class="feature-text">健康监测</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/index/healthDetail')">
        <image class="feature-icon icon-standard" src="https://img.icons8.com/fluency/96/document.png" alt="健康档案图标"/>
        <text class="feature-text">健康档案</text>
      </view>
      <view class="feature-item" @click="navigateTo('/pages/index/healthDetail')">
        <image class="feature-icon icon-standard" src="../../static/application.jpg" alt="健康档案图标"/>
        <text class="feature-text">申请服务</text>
      </view>
    </view>

    <view class="info-section">
      <view class="info-card">
        <view class="info-text">
          <text class="info-title">健康头条</text>
          <text class="info-subtitle">健康资讯早知道</text>
        </view>
        <image class="info-icon icon-standard" src="https://img.icons8.com/fluency/96/news.png" alt="健康头条图标"/>
      </view>
      <view class="info-card">
        <view class="info-text">
          <text class="info-title">慢病护理</text>
          <text class="info-subtitle">慢病护理小常识</text>
        </view>
        <image class="info-icon2 icon-standard" src="../../static/book.jpg" alt="慢病护理图标"/>
      </view>
    </view>

    <view class="team-section" v-if="signedTeam">
      <view class="section-title">我的签约团队</view>
    </view>

  </view>
</template>

<script>
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  data() {
    return {
      // 用于控制是否显示“我的签约团队”板块
      signedTeam: true,
      // 搜索输入绑定
      searchText: ''
    };
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    onSearch() {
      if (!this.searchText) {
        uni.showToast({ title: '请输入搜索内容', icon: 'none' });
        return;
      }
      // 示例：跳转到搜索结果页（请按需修改路径）
      uni.navigateTo({ url: '/pages/search/index?kw=' + encodeURIComponent(this.searchText) });
    }
  }
}
</script>

<style>
/* 全局背景色 */
.home-container {
  background-color: #f5f8ff;
  padding: 20rpx 30rpx;
  padding-bottom: 50rpx;
}

/* 顶部自定义导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding-top: var(--status-bar-height); /* 适配状态栏 */
}
.location-section {
  display: flex;
  align-items: center;
}
.location-text {
  margin-left: 8rpx;
  font-size: 28rpx;
  color: #333;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.placeholder {
  width: 120rpx; /* 与左侧区域宽度相近以保证居中 */
}

/* 搜索框 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 36rpx;
  padding: 18rpx 24rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.search-input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 28rpx;
  background: transparent;
  border: none;
  height: 60rpx;
  color: #333;
}

/* 核心功能 */
.main-features {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}
.feature-icon {
  /* 宽度和高度已被通用类控制 */
  margin-bottom: 16rpx;
}
.feature-text {
  font-size: 26rpx;
  color: #333;
}

/* --- 推广卡片最终解决方案 --- */
.promo-card {
  background: linear-gradient(135deg, #e0f0ff, #cce4ff);
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  min-height: 220rpx;
  box-sizing: border-box;
  position: relative; /* 关键1: 作为绝对定位的参考 */
  overflow: hidden; /* 防止图片溢出 */
  display: flex; /* 让内部元素排列 */
  align-items: center; /* 让文字内容垂直居中 */
}
.promo-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60%; /* 给文字留出空间 */
  z-index: 2; /* 确保文字在图片上层 */
}
.promo-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #0d47a1;
  line-height: 1.4;
}
.promo-subtitle {
  font-size: 24rpx;
  color: #427ab3;
  margin: 10rpx 0 24rpx;
}
.promo-button {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 30rpx;
  font-size: 26rpx;
  padding: 0;
}
.promo-image {
  width: 250rpx;
  height: 250rpx;
  position: absolute;
  bottom: 0;
  right: 20rpx;
  z-index: 1;
}

/* 内容资讯 */
.info-section {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 40rpx;
}
.info-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
}
.info-text {
  display: flex;
  flex-direction: column;
}
.info-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.info-subtitle {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}
/* 这两个类现在只作为选择器，尺寸由 .icon-standard 控制 */
.info-icon, .info-icon2 {
  /* 宽度和高度已被通用类控制 */
}


/* ++++++ 新增的通用图标样式 ++++++ */
.icon-standard {
  width: 96rpx;
  height: 96rpx;
  object-fit: contain; /* 核心：防止图片因尺寸固定而拉伸变形 */
}
/* +++++++++++++++++++++++++++++++ */


/* 我的签约团队 */
.section-title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.team-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}
.team-avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}
.team-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.team-org {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
</style>